<!-- 编辑存储区域 -->
<template>
  <div>
    <a-modal
      :title="$t('Edit')+$t('Storage-area')"
      v-model="modalVisible"
      width='30%'
      @ok="handleSubmit"
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form="form">
        <a-form-item :label="$t('Storage-area')" v-bind="dynamicFormLayout">
          <a-select
            disabled
            v-decorator="['store_area',{
              // rules:[{ required:true, message:$t('Choose')+$t('Storage-area') }],
              initialValue: targetStoreArea.name
            }]"
            :placeholder="$t('Choose')+$t('Storage-area')"
          >
            <!-- <a-select-option value="1">
              1
            </a-select-option> -->
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('Store-label')" v-bind="dynamicFormLayout">
          <a-select 
            disabled
            v-decorator="['store_label',{
              // rules:[{ required:true, message:$t('Choose')+$t('Store-label') }],
              initialValue: targetStoreArea.storage_class
            }]"
            :placeholder="$t('Choose')+$t('Store-label')"
          >
            <!-- <a-select-option value="1">
              1
            </a-select-option> -->
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('Pool')" v-bind="dynamicFormLayout" has-feedback>
          <a-spin :spinning="getPoolLoading">
          <a-select 
            v-decorator="['store_pool',{
              // rules:[{ required:true, message:$t('Choose')+$t('Pool') }],
              initialValue: targetStoreArea.data_pool
            }]"
            :placeholder="$t('Choose')+$t('Pool')"
            allowClear
          >
            <a-select-option v-for="(item,index) in poolsData" :key="index" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
          </a-spin>
        </a-form-item>
        <a-form-item :label="$t('Compress-type')" v-bind="dynamicFormLayout" has-feedback>
          <a-select 
            v-decorator="['compress_type',{
              // rules:[{ required:true, message:$t('Choose')+$t('Compress-type') }],
              initialValue: targetStoreArea.compression
            }]"
            :placeholder="$t('Choose')+$t('Compress-type')"
            allowClear
          >
            <a-select-option v-for="(item, index) in COMPRESS_TYPE" :value="item" :key="index">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleReset" class="submit-btn">
          {{$t('Reset')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "EditStoreArea",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    COMPRESS_TYPE: {
      type: Array,
      required: true
    },
    targetArea: {
      type: Object,
      required: true,
      default: () => { return {} }
    },
    targetStoreArea: {},
    poolData: {
      type: Array,
      required: true,
      default: () => { return [] }
    },
    listPoolData: {
      type: Array,
      required: true,
      default: () => { return [] }
    },
    getPoolLoading: {
      type: Boolean,
      required: true
    }
  },

  data() {
    return {
      modalVisible: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
      formLayoutEN:{
        labelCol: {span: 9},
        wrapperCol: {span: 14}
      },
      submitLoading: false,
      poolsData: []
    }
  },

  watch: {
    visible(newValue) {
      this.poolsData = [...this.poolData, ...this.listPoolData];
      if (!this.poolsData.includes(this.targetStoreArea.data_pool)) this.poolsData.push(this.targetStoreArea.data_pool)
      this.modalVisible = newValue;
    }
  },

  computed: {
    dynamicFormLayout() {
      if(this.$store.state.language=='zh') {
        return this.formLayout;
      }
      return this.formLayoutEN;
    }
  },

  methods: {
    //提交编辑存储区域
    handleSubmit() {
      this.form.validateFields(async (err,value)=>{
        if(!err){
          this.submitLoading = true;
          const params = {
            id: this.targetStoreArea.id,
            zone_id: this.targetArea.zone_id,
            zone_name: this.targetArea.zone_name,
            name: value.store_area,
            storage_class: value.store_label,
            data_pool: value.store_pool,
            compression: value.compress_type,
          }
          const res = await this.$api.areaManage.editStoreAreaRequest(params);
          if(res && res.data) {
            this.model(res.data.id) //返回模板
            this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
            if(res.data.flag !== 1) {
              this.$emit('updateStoreArea');
            }
          }
          this.handleCancel();
          this.submitLoading = false;
        }
      })
    },

    //重置表单
    handleReset() {
      this.form.resetFields(); //重置弹窗
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'edit-store-area');
      this.handleReset();
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>